<template>
  <section>
    <!--start 面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>资金</el-breadcrumb-item>
        <el-breadcrumb-item>收款账户</el-breadcrumb-item>
      </el-breadcrumb>
     		<help-components>
				<span slot="headText">{{helpData.templateName}}</span>
				<p slot="headDescText" v-html="helpData.templateRemark"></p>
				<div slot="helpContentWrap">
					<div v-for="(item,index) in helpData.questionAndAnswerArray">
						<h3>{{item.templateContent}}</h3>
						<p v-html="item.templateRemark"></p>
					</div>
				</div>
			</help-components>
    </div>
    <!--end 面包屑-->
    <!--start content-->
    <div class="content">

      <!--支付宝  start-->
      <div class="height-search">
        <transition name="fade">
          <div class="modal-backdrop" v-show="zfPay"></div>
        </transition>
        <transition name="slideDown">
          <div class="pay-s-con" v-show="zfPay">
            <p class="search-title">支付宝签约信息</p>
            <div class="zfLeft">
              <p class="tips"> 设置账号前，请确保您已签约支付宝 “即时到账收款”与“移动支付”收款服务。<a>查看帮助</a></p>
              <el-form ref="Form" :rules="rules" :model="form" label-width="170px">
                <el-form-item label="支付宝企业账户" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="合作者身份（Partner ID）" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="安全校验码（Key）" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="name">
                  <el-radio-group v-model="form.name">
                    <el-radio label="启用"></el-radio>
                    <el-radio label="停用"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label-width="15px">
                  <el-button @click="zfSure" :disabled="clickBtn" type="primary">确定</el-button>
                  <el-button @click="zfCancel">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="zfRight">
              <p class="pList">如何设置支付宝签约信息?</p>
              <p class="pList">1、访问支付宝商户服务中心（b.alipay.com），用您的签约支付宝账号登录。</p>
              <p class="pList">2、在“我的商家服务”中，点击“查询 PID、Key” ，将查询的相应信息填写到上面相应输入框中。</p>
              <p class="pList" style="margin-bottom: 30px">3、在上述打开的支付宝页面的“合作伙伴密钥管理”下，点击“RSA加密”后的“添加密钥”。</p>
              <p class="pList" style="margin-bottom: 20px">把下面的密钥复制到弹出框内(注意不要多余的空格)：</p>
              <el-input
                type="textarea"
                style="width: 450px;height: 100px"
                :rows="2"
                placeholder="请输入内容"
                v-model="textarea">
              </el-input>
            </div>
          </div>
        </transition>
      </div>
      <!--支付宝支付  end-->


      <!--微信支付  start-->
      <div class="height-search">
        <transition name="fade">
          <div class="modal-backdrop" v-show="vue_wxPay"></div>
        </transition>
        <transition name="slideDown">
          <div class="wx-s-con" v-show="vue_wxPay">
            <p class="search-title">微信签约信息</p>
            <p class="tips"> 设置账号前，请确保您已在微信平台完成相关设置。查看帮助</p>
            <el-form ref="Form" :rules="rules" :model="form" label-width="180px">
              <el-form-item label="AppID（应用ID）" prop="name">
                <el-input v-model="form.name" style="width: 327px"></el-input>
                <span class="tipSpan">取路劲：公众平台-开发者中心</span>
              </el-form-item>
              <el-form-item label="AppSecret（应用密钥）" prop="name">
                <el-input v-model="form.name" style="width: 327px"></el-input>
                <span class="tipSpan">获取路劲：公众平台-开发者中心</span>
              </el-form-item>
              <el-form-item label="（Mchid）商户号" prop="name">
                <el-input v-model="form.name" style="width: 327px"></el-input>
                <span class="tipSpan">获取路劲：公众平台-微信支付</span>
              </el-form-item>
              <el-form-item label="Appkey（API密钥）" prop="name">
                <el-input v-model="form.name" style="width: 327px"></el-input>
                <span class="tipSpan">获取路劲：商户平台-API安全-API密钥</span>
              </el-form-item>
              <el-form-item label="状态" prop="name">
                <el-radio-group v-model="form.name">
                  <el-radio label="启用"></el-radio>
                  <el-radio label="停用"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label-width="15px">
                <el-button @click="wxSure" type="primary">确定</el-button>
                <el-button @click="wxCancel">取消</el-button>
              </el-form-item>
            </el-form>

          </div>
        </transition>
      </div>
      <!--微信支付  end-->

      <!--新增(线下)  start-->
      <div class="height-search">
        <transition name="fade">
          <div class="modal-backdrop" v-show="vue_addNew"></div>
        </transition>
        <transition name="slideDown">
          <div class="height-s-con" v-show="vue_addNew">
            <p class="search-title">新增</p>
            <el-form ref="addForm" :rules="rules" :model="addFormData" label-width="80px">
              <el-form-item label="账户名称" prop="accountName">
                <el-input v-model="addFormData.accountName"></el-input>
              </el-form-item>
              <el-form-item label="开户银行" prop="openBank">
                <el-input v-model="addFormData.openBank"></el-input>
              </el-form-item>
              <el-form-item label="银行账号" prop="bankNumber">
                <el-input v-model="addFormData.bankNumber"></el-input>
              </el-form-item>
              <el-form-item label-width="15px">
                <el-button :disabled="clickBtn" @click="addSure" type="primary">确定</el-button>
                <el-button @click="addCancel">取消</el-button>
              </el-form-item>
            </el-form>

          </div>
        </transition>
      </div>
      <!--新增(线下)  end-->

      <!--ziJin-con  start-->
      <div class="ziJin-con">
        <el-button class="addNewBn" v-show="show == 1" type="primary" @click="vue_addNew=true">新增</el-button>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="在线支付" name="onlinePay">
            <div class="online-con">
              <div class="online-box">
                <div class="online-list">
                  <div class="onlinePay-item-header">
                    <img class="fl" src="../../../img/zfb.png"/>
                    <el-button class="set" type="primary" @click="zfPay=true">设置收款账号</el-button>
                  </div>
                  <p class="onlinePay-item-body">
                    需开通企业支付宝账号，仅支持以企业对公账户作为收款账户。交易手续费由支付宝公司向收款方收取。
                  </p>
                  <div class="onlinePay-item-footer">
                    <a class="openGuide"> <em class="iconfont tab-hover" style="font-size: 14px;margin-right: 4px">&#xe686;</em>开通向导</a>
                    <span class="fr noOpen">未开通</span>
                  </div>
                </div>
                <div class="online-list">
                  <div class="onlinePay-item-header">
                    <img class="fl" src="../../../img/wx.png"/>
                    <el-button class="set" type="primary" @click="vue_wxPay=true">设置收款账号</el-button>
                  </div>
                  <p class="onlinePay-item-body">
                    需您开通微信服务号，并与腾讯公司签约收款服务；交易手续费由腾讯公司向收款方收取。
                  </p>
                  <div class="onlinePay-item-footer">
                    <a class="openGuide"> <em class="iconfont tab-hover" style="font-size: 14px;margin-right: 4px">&#xe686;</em>开通向导</a>
                    <span class="fr noOpen">未开通</span>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="线下支付" name="linePay">
            <!--线下支付表格    start-->
            <el-table
              :data="fundMerchantSet.list"
              max-height="360"
              @sort-change="vFun_sort"
              style="width: 100%; margin-top: 25px;">
              <el-table-column
                prop="merchantName"
                sortable="custom"
                label="账户名称"
                width="340">
              </el-table-column>
              <el-table-column
                prop="merchantSignStr1"
                sortable="custom"
                label="开户银行"
                width="340">
              </el-table-column>
              <el-table-column
                prop="merchantSignNo"
                sortable="custom"
                label="银行账号"
                width="340">
              </el-table-column>
              <el-table-column label="操作">
                <template scope="scope">
                  <span class="goTo" @click="row_handleDelete(scope.$index, scope.row)">删除</span>
                </template>
              </el-table-column>
            </el-table>
            <!--线下支付表格    start-->
          </el-tab-pane>
        </el-tabs>

        <!--分页  start-->
        <div v-show="show == 1" class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="parseInt(fundMerchantSet.pageTools.pageNo)"
            :page-sizes="fundMerchantSet.pageTools.pageSizeOptions"
            :page-size="parseInt(fundMerchantSet.pageTools.pageSize)"
            layout="total, prev, pager, next, sizes,jumper"
            :total="parseInt(fundMerchantSet.pageTools.recordCount)">
          </el-pagination>
        </div>
        <!--分页  end-->

      </div>
      <!--ziJin-con  end-->
    </div>
    <!--start content-->
  </section>
</template>

<script>
  import helpComponents from '../../../components/help/help'
	export default {
		components:{helpComponents},
    data() {
      var bankNmberV = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('银行账号不能为空'));
        }
        setTimeout(() => {
          if (parseInt(value) != value) {
            callback(new Error('请输入数字值'));
          } else {
            if (!/^(\d{16}|\d{19})$/.test(value)) {
              callback(new Error('请输入正确银行账号'));
            } else {
              callback();
            }
          }
        }, 100);
      };
      return {
       	clickBtn:false,                 //请求数据后禁用按钮			      	
      	vue_addNew: false,              //线下新增按钮
        vue_wxPay: false,              //微信账号设置弹出
        zfPay: false,              //支付宝账号设置弹出
        show: "",                  //tab切换控制新增按钮显示
        activeName: 'onlinePay',   //线上线下tab默认显示的tab标签
        orderStr:'',
        
      	helpData:{
					templateName:"",
					templateRemark:"",
					questionAndAnswerArray:[]
				},
        
        fundMerchantSet:{
        	list:[],							  //线下table表格的数据
					pageTools:{},						//分页数据
					sumInfo:{}							//汇总信息
        },
        
        addFormData: {            //新增线下账户数据
          accountName: '',
          openBank: '',
          bankNumber: '',
        },
        
        
        rules: {                   //表单验证
          accountName: [
            {required: true, message: '账户名称不能为空', trigger: 'blur'},
          ],
          openBank: [
            {required: true, message: '开户银行不能为空', trigger: 'blur'},
          ],
          bankNumber: [
            {required: true, validator: bankNmberV, trigger: 'blur'}
          ],
        },
        textarea: 'MIGfMA0GCSqGSIb3DQZUdfIrJqQynM7lYfSPCoRHczVV6Q9sP081QYA1KMcJg13rwIDAQAB',
        form: {
          name: '',
          level: '',
          department: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
      };

    },
    methods: {
    	vFun_sort(type){
    		if(type.order==='ascending'){
    			this.orderStr=type.prop
    		}else if(type.order==='descending'){
    			this.orderStr=type.prop +' desc'
    		}else{
    			this.orderStr=''
    		};
    		this.queryByPage();
    	},    	
//---------------------------删除操作的弹出层   start---------------------------
      row_handleDelete($index, row){
        const h = this.$createElement;
        this.$msgbox({
          title: '确认',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 16px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'}, '是否确认删除此收款账户？'),
            ],
          ),
          customClass: "surePay clearfixBox",
          cancelButtonClass: 'fr',
          confirmButtonClass: 'fr',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {
          if (action === 'confirm') {
            this.axios({
              method: "delete",
              url: "/v3/fund/merchants/"+row.merchantCode,
              data: {}
            }).then((res) => {
              this.queryByPage();
							this.Public.openSuccess(this,"操作成功！");
            }).catch((err)=>{
							  this.Public.openError(this,err.response.data)
						});
          }
          ;
        })

      },
//---------------------------新增(线下)   start---------------------------
      addCancel(){                                        //新增取消
        this.vue_addNew = false;
        this.$refs.addForm.resetFields();
      },
      addSure(){                                          //新增确定
        this.$refs.addForm.validate((valid) => {
          if (valid) {
          	this.clickBtn=!this.clickBtn;
            this.axios({
              method: 'post',
              url: "/v3/fund/merchants",
              data: {
                "merchantName": this.addFormData.accountName,
                "merchantSignStr1": this.addFormData.openBank,
                "merchantSignNo": this.addFormData.bankNumber,
              }
            }).then((res) => {
           		 	this.clickBtn=!this.clickBtn;
                this.vue_addNew = false;
                this.$refs.addForm.resetFields();
                this.queryByPage();
                this.Public.openSuccess(this,"操作成功！");
            }).catch((err)=>{
            		this.clickBtn=!this.clickBtn;
							  this.Public.openError(this,err.response.data)
						});
          } else {
            this.Public.openError('请完善所填信息');
            return false;
          }
        });

      },
//---------------------------支付宝账号设置弹出   start---------------------------
      zfCancel(){                                    //支付宝账号设置取消
        this.zfPay = false;
        this.$refs.Form.resetFields();
      },
      zfSure(){                                       //支付宝账号设置确认

      },
//---------------------------微信账号设置弹出   start---------------------------
      wxCancel(){                                     //微信账号设置取消
        this.vue_wxPay = false;
        this.$refs.Form.resetFields();
      },
      wxSure(){                                       //微信账号设置取消

      },
//-------------------------- 查询表数据--------------------------
			queryByPage(){
				this.axios({
          method: 'post',
          url: "/v3/fund/merchants/list",
          data: {
            "limit": this.fundMerchantSet.pageTools.pageSize,
            "offset": (this.fundMerchantSet.pageTools.pageNo - 1) * this.fundMerchantSet.pageTools.pageSize,
            "orderStr":this.orderStr,
          }
        }).then((res) => {
            this.fundMerchantSet.list = res.data.list;
            this.fundMerchantSet.pageTools = res.data.pageTools;
            this.fundMerchantSet.sumInfo = res.data.sumInfo;
            this.fundMerchantSet.pageTools.pageSizeOptions = JSON.parse(this.fundMerchantSet.pageTools.pageSizeOptions);
        }).catch((err)=>{
			      this.Public.openError(this,err.response.data)
		    });
			},
//---------------------------分页设置     start---------------------------
      handleSizeChange(val) {
       			 this.fundMerchantSet.pageTools.pageSize = val;
      			 this.queryByPage();
      },
      handleCurrentChange(val) {
      			  this.fundMerchantSet.pageTools.pageNo = val;
       				this.queryByPage();
      },
//---------------------------tab切换显示新增   start---------------------------
      handleClick(tab, event) {
      			  this.show = tab.index
      },
//---------------------------查询帮助信息------------------------------------
      query_systemTemplate(){
				this.axios({
					method:"GET",
					url:"/v3/system/templates/00100000009"
				}).then((res)=>{
						this.helpData.templateName = res.data.templateName;
						this.helpData.templateRemark = res.data.templateRemark;
						this.helpData.questionAndAnswerArray = res.data.questionAndAnswerArray;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
    },
    created(){
    	this.fundMerchantSet.pageTools = this.$store.state.page;
		},
    mounted(){
//---------------------------打开页面渲染数据   start---------------------------
      this.queryByPage();
      this.query_systemTemplate();
//---------------------------下拉箭头旋转   start---------------------------
      document.querySelector('body').onclick = () => {
        if (this.allOrder == true) {
          this.allOrder = false;
        }
      };	
			//帮助功能
			

    }
  };
</script>

<style scoped>

  .tipSpan {
    float: right;
  }

  .zfLeft {
    float: left;
    width: 435px;
    overflow: hidden;
    margin-right: 40px;
  }

  .zfRight {
    overflow: hidden;
  }

  .tips {
    color: #96a6b6 !important;
    margin-bottom: 20px;
  }

  .pList {
    color: #96a6b6 !important;
  }

  .el-form {
    overflow: hidden;
  }

  .el-form .el-form-item:last-child {
    width: 100%;
  }

  .el-form-item {
    width: 485px;
    float: left;
    margin-right: 10px;
  }

  .goTo:hover {
    color: #13c19f;
    cursor: pointer;
  }

  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    background-color: rgba(240, 240, 240, 0.2);
  }

  .pay-s-con {
    position: absolute;
    width: 100%;
    height: 436px;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    overflow: hidden;
  }

  .wx-s-con {
    position: absolute;
    width: 100%;
    height: 450px;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    overflow: hidden;
  }

  .wx-s-con > .el-form > .el-form-item {
    width: 986px !important;
  }

  .height-s-con {
    position: absolute;
    width: 100%;
    height: 300px;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    overflow: hidden;
  }

  .search-title {
    font-size: 16px;
    border: 0;
    color: #415161;
    margin-bottom: 20px;
  }

  .fade-enter-active, .fade-leave-active {
    transition: .4s;
  }

  .fade-enter, .fade-leave-active {
    opacity: 0;
  }

  .slideDown-enter-active, .slideDown-leave-active {
    transition: .4s;
  }

  .slideDown-enter, .slideDown-leave-active {
    height: 0;
    opacity: 0;
  }

  .goTo:hover {
    color: #13c19f;
    cursor: pointer;
  }

  .ziJin-con > .block {
    float: right;
    margin-top: 10px;
  }

  .el-table::after {
    background-color: inherit;
  }

  .addNewBn {
    z-index: 99;
    position: absolute;
    right: 15px;
    top: 10px;
  }

  .openGuide {
    float: left !important;
    cursor: pointer;
  }

  .openGuide:hover {
    color: #13c19f;
  }

  .onlinePay-item-footer {
    margin: 0px 15px;
    height: 34px;
  }

  .onlinePay-item-footer .noOpen {
    display: block;
    line-height: 34px;
    height: 34px;
  }

  .set {
    width: 104px !important;
    float: right;
  }

  .onlinePay-item-body {
    margin: 0 30px 30px;
    height: 57px;
    font-size: 14px;
  }

  .onlinePay-item-header {
    height: 50px;
    background-color: #f8fafd;
    margin-bottom: 40px;
    padding: 20px 30px 0 15px;
  }

  .online-list {
    display: table;
    float: left;
    width: 365px;
    min-width: 310px;
    height: 240px;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    margin-right: 20px;
    margin-bottom: 20px;
  }

  .online-box {
    margin-top: 25px;
    overflow: hidden;
  }

  .online-con {
    width: 100%;
    overflow: hidden;
  }

  section {
    display: flex;
    flex-direction: column;
    flex: 1;
    /*position: relative;*/

  }

  div.location {
    flex: 0 0 10px;
    padding: 3px 0 15px 0;
  }

  div.content {
    position: relative;
    flex: 1;
    width: 100%;
    background-color: #fff;
  }

  .ziJin-con {
    padding: 0px 14px;
    position: relative;
  }

</style>
